<template>
    <!-- 设置参数 -->
    <yi-dialog class="set-params" title="设置参数" width="600px"
        :visible.sync="dialogVisible"
        isHandle
        @confirm="confirm"
        @cancel="cancel"
    >
        <div class="button">
            <el-button type="primary" icon="el-icon-plus" @click="add()">新增参数</el-button>
        </div>
        <yi-table ref="table" :data="table.data" @getData="getData" height="375px">
            <el-table-column label="参数">
                <template slot-scope="{ row }">
                    <el-input v-model.trim="row.field" placeholder="字段" clearable></el-input>
                </template>
            </el-table-column>
            <el-table-column label="测试数值">
                <template slot-scope="{ row }">
                    <el-input v-model.trim="row.testData" placeholder="测试数值" clearable></el-input>
                </template>
            </el-table-column>
            <el-table-column label="启/禁用" width="80">
                <template slot-scope="{ row }">
                    <el-switch v-model="row.disabled" active-color="#1890ff" inactive-color="#ccc"></el-switch>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="60">
                <template slot-scope="scope">
                    <el-button type="text" @click="deleteFieid(scope)">删除</el-button>
                </template>
            </el-table-column>
        </yi-table>
    </yi-dialog>
</template>

<script>
import { warning, success } from "@/utils/errorInfo";
export default {
    name: "setParams",
    data() {
        return {
            dialogVisible: false,
            table: {
                data: []
            },
            index: null
        }
    },
    methods: {
        open(data, index) {
            this.dialogVisible = true;
            this.table.data.length = 0;
            this.$nextTick(() => {
                this.index = index;
                this.table.data = data;
            })
        },
        getData() {
            this.$refs.table.loading = false;
        },
        add() {
            this.table.data.push({
                field: "", // 字段
                testData: "", // 测试数据
                disabled: true
            })
        },
        deleteFieid(scope) { // 删除
            this.table.data.splice(scope.$index, 1);
        },
        isCheck() { // 校验
            let lock = false;
            lock = this.table.data.every(item => item.field);
            return lock;
        },
        confirm() {
            if (this.isCheck()) {
                this.$emit('paramsSuccess', { data: this.table.data, index: this.index });
                success('设置参数成功');
                this.cancel();
            } else {
                warning('参数字段必填');
            }
        },
        cancel() {
            this.dialogVisible = false;
            this.index = null;
        }
    }
}
</script>
